<template>
  <div class="census-item-wrap flex">
    <div class="pie-box">
      <div id="census-pie"></div>
    </div>
    <div class="census-data-wrap flex flex-width">
      <div class="row-item-txt">
        <label class="txt"><i class="image icon iconfont iconzhaice" />在册员工</label>
        <span>{{ censusInfo.regNum }}</span>
      </div>
      <div class="row-item-txt">
        <label><i class="image icon iconfont iconshijian" />迟到</label>
        <span>{{ censusInfo.lateSize }}</span>
      </div>
      <div class="row-item-txt">
        <label class="txt"><i class="image icon iconfont iconrenshu" />考勤人数</label>
        <span>{{ censusInfo.dutyNum }}</span>
      </div>
      <div class="row-item-txt">
        <label><i class="image icon iconfont iconchidao" />早退</label>
        <span>{{ censusInfo.leaveEarlySize }}</span>
      </div>
      <div class="row-item-txt">
        <label class="txt"><i class="image icon iconfont iconchuqin" />今日出勤</label>
        <span>{{ censusInfo.dutyNum }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';

export default {
  name: "CensusChart",
  components: {},
  data() {
    return {
      data: [],
      censusInfo: {
        regNum: "",
        dutyNum: "",
        lateSize: "",
        leaveEarlySize: ""
      }
    }
  },
  computed: {
    ...mapState(['staffDataInfo'])
  },

  watch: {
    staffDataInfo(val) {
      let arr = [];
      arr.push({
        value: parseInt(val.dutyrate),
        name: "出勤率"
      }, {
        value: parseInt(100 - val.dutyrate),
        name: '未出勤'
      })
      this.data = arr;
      this.censusInfo = val;
      this.renderCensusData();
    }
  },

  methods: {
    renderCensusData() {
      let num = this.data[0].value.toString();
      let textLeft;
      if (num.length == 1) {
        textLeft = "52%";
      } else if (num.length == 2) {
        textLeft = "49%";
      } else if (num.length == 3) {
        textLeft = "47%";
      }

      let div = document.getElementById('census-pie');
      let chart = this.echarts.init(div);
      chart.setOption({
        color: ['#7367F0', 'rgba(115,103,240,0.2)'],
        title: {
          text: num ? num + "%" : " ",
          left: textLeft,
          top: "35%",
          textStyle: {
            color: "#7367F0",
            fontSize: 20,
          },
          subtextStyle: {
            fontSize: 30,
            color: ['#ff9d19'],
          },
        },
        graphic: {
          type: "text",
          left: "52%",
          top: "54%",
          style: {
            text: this.data[0].name ? this.data[0].name : "",
            textAlign: "center",
            fill: "#7367F0",
            fontSize: 13,
            fontWeight: 700
          }
        },
        series: [{
          name: '',
          type: 'pie',
          center: ['62%', '50%'], // 饼图的圆心坐标
          radius: ['50%', '70%'], // 饼图的圆心大小
          hoverAnimation: false,　// 移入放大
          // 饼状图外的文字提示
          itemStyle: {
            normal: {
              label: {
                show: false
              }
            }
          },
          data: this.data
        }]
      })
    }
  }
}
</script>

<style scoped lang="scss">
.census-item-wrap {
  height: 100%;
  align-items: center;

  .pie-box {
    width: 30%;
    height: 100%;

    #census-pie {
      width: 100%;
      height: 100%;
    }
  }

  .census-data-wrap {
    height: 70%;
    margin-left: 20px;
    flex-wrap: wrap;

    .row-item-txt {
      width: 50%;
      font-size: 14px;
      color: #909090;
      display: flex;
      justify-content: center;
      align-items: center;

      &:nth-child(1) .image{
        color: #2E85ED;
      }

      &:nth-child(2) .image{
        color: #EF31F7;
      }

      &:nth-child(3) .image{
        color: #FF8739;
      }

      &:nth-child(4) .image{
        color: #1ED9DF;
      }

      &:nth-child(5) .image{
        color: #2CCF7A;
      }

      .txt {
        width: 88px;
      }

      label {
        display: flex;
        align-items: center;
      }

      .image {
        margin-right: 6px;
      }

      span {
        margin-left: 20px;
        color: #333333;
        font-size: 18px;
        width: 40px;
        display: inline-block;
        margin-top: -2px;
      }
    }
  }
}
</style>
